<template>
  <div class="common-container goodsinfo-container">
    <div class="common-navigation">
      <h6>首页 &gt; 商品列表 &gt; {{ detail.goodsName }} &gt; 填写订单信息</h6>
    </div>
    <div class="goodsinfo-detail">
      <div class="editorderinfo common-clearboth">
        <div class="editorderinfo-left">
          <h6 class="common-title">填写订单信息</h6>
          <el-form class="order-form">
            <el-form-item label="商品名称">
              {{ detail.goodsName }}
            </el-form-item>
            <el-form-item label="销售单价">
              {{ detail.goodsPrice }}元
            </el-form-item>
            <el-form-item label="商品类型">
              提取卡密
            </el-form-item>
            <el-form-item label="购买数量">
              <el-select
                v-model="num"
                style="width: 100%;">
                <el-option
                  v-for="i in 10"
                  :key="i"
                  :label="i+'个'"
                  :value="i">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="购买备注">
              <el-input
                type="textarea"
                v-model="remark"
                placeholder="请输入购买备注">
              </el-input>
            </el-form-item>
            <el-form-item label="购买总价">
              {{ total }}
            </el-form-item>
            <el-form-item label="　">
              <el-button
                type="primary"
                @click="submit">
                确认订单
              </el-button>
            </el-form-item>
          </el-form>

        </div>

        <div class="editorderinfo-right" style="top:6px;">
          <div class="editorderinfo-right-header">
            <h6>购买须知</h6>
          </div>
          <div class="editorderinfo-right-body">
            <ul>
              <li>1、下单前请您确认商品页面介绍，（卡密商品、特殊商品）除自身商品问题外，不支持7天无理由退换货.</li>
              <li>2、商品价格随时可能变动，购买商品以付款当时价格为准，不可因为购买商品之后发生降价而要求赔偿.</li>
              <li>3、实物商品严格按照消费者保障服务，商品自签收后，在不影响二次销售的情况下，客服为您提供7天无理由退货服务（特殊商品除外）.</li>
              <li>4、您的个人资料除经您同意或政府机关、法院及其他本站应依法提供之情形者外，绝不贩卖或透露给网站以外的其他人及单位，并严禁内部人员私自使用.</li>
              <li>5、注册用户在使用本系统的过程中遇到任何使用问题均可通过电话或在线沟通方式与我们联系以获取技术支持和保障。我们承诺将及时响应用户的请求，在工作时间内给予用户满意的答复，为用户提供专业高效的服务.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible="chongzhiible"
      width="840px"
      title=""
      @close="chongzhiible = false;
      isLoading=false">
      <charge ref="chongzhi"></charge>
    </el-dialog>

  </div>
</template>

<script>

import { mapState } from 'vuex'
import charge from '@/pages/charge5'

export default {
  layout: 'webIn44',
  middleware: ['tradePwd'],
  data() {
    return {
      isLoading: true,
      detail: {},
      num: 0,
      action: 1,
      showPrice: false,
      password: '',
      remark: '',
      confirmVisible: false,
      chongzhiible:false
    }
  },
  components: {
    charge,
  },
  computed: {
    ...mapState({
      hasTradePwd: (state) => state.hasTradePwd
    }),
    total() {
      let price = this.detail.goodsPrice * this.num
      price = parseFloat(price.toFixed(3))
      if (isNaN(price)) {
        return 0
      }
      return price
    }
  },
  async mounted() {
    const { id } = this.$route.query
    const dres = await this.$axios.get(`goods/goods/getGoods?goodsID=${id}`)
    if (dres.code === 1001 && dres.body) {
      this.detail = dres.body
      if (this.detail.cardNum > 0) {
        this.num = 1
      }
    }
    this.isLoading = false
  },
  methods: {
    async submit() {
      if (!this.num) {
        return this.$message.error('请选择购买数量')
      }
      if (this.num > this.detail.cardNum) {
        return this.$message.error('卡密库存不足')
      }
      if (this.hasTradePwd && !this.password) {
        return this.$message.error('请输入交易密码')
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const reqData = {
        goodsID: this.detail.goodsID,
        num: this.num
      }
      const res = await this.$axios.post('/order/order/addOrder', null, {
        params: reqData
      })
      if (res.code === 1001 && res.body) {
        this.$message.success('购卡成功')
        setTimeout(() => {
          location.href = `/orders4?orderID=${res.body.orderID}`
        }, 1500)
      } else {
        if(res.code == 1011){
          this.$confirm('是否进行充值 ? ? ?', '余额不足', {
            confirmButtonText: '充值',
            cancelButtonText: '取消'
          })
            .then(() => {
              this.chongzhiible=true;
              loading.close()
              //  console.log('充值')
              // location.href = `/charge`
            })
            .catch((action) => {
              //  console.log('取消')
              loading.close()
            })

        }else if(res.code == 1002){
          return this.$message.error(res.msg)
        }

        // setTimeout(() => {
        //   location.href = `/charge`
        // }, 100)
      }
    },
    goBack() {
      history.back()
    }
  }
}
</script>

<style lang="scss" scoped>

@import 'element-ui/lib/theme-chalk/index.css';
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style61/common.css';
@import 'assets/style/style61/style.css';
@import 'assets/style/style61/font_1451715_0505c2bxv7b7.css';
.box-card {
  ::v-deep.el-form-item__label {
    text-align: left;
    padding-left: 20px;
  }
  ::v-deep.el-textarea {
    textarea {
      line-height: 30px;
    }
  }
}

.xgk-madestyle-search {
  position:absolute;
  right:0;
  top:25px;
}
.xgk-madestyle-search .layui-input-inline {
  float:left;
}
.xgk-madestyle-search .layui-select-title input {
  border-radius:2px 0 0 2px;
  border-right:none;
}
.xgk-madestyle-searchbtn {
  position:relative;
  height:31px;
  line-height:31px;
  margin-left:-1px;
}
.editorderinfo {
  position: relative;
  width: 100%;
  margin-top: 20px;
  &-left {
    width: 400px;
    position: relative;
    float: left;
    min-height: 500px;
  }
  &-right {
    position: relative;
    float: right;
    width: 600px;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #f57a7a;
    &-header {
      height: 40px;
      background: #f57a7a;
      color: white;
      padding: 0 20px;
      box-sizing: border-box;
      h6 {
        line-height: 40px;
        color: white;
      }
    }
    &-body {
      padding: 10px 20px;
      box-sizing: border-box;
      ul {
        li {
          line-height: 20px;
          font-size: 12px;
          color: #666;
          margin-bottom: 10px;
        }
      }
    }
  }
  form {
    margin-top: 10px;
  }
}

</style>
<style lang="scss">
.order-form {
  margin-left: 70px;
  .el-form-item {
    display: flex;
    margin-bottom: 9px;
    label {
      min-width: 100px;
    }
    .el-form-item__content,
    textarea,
    input {
      width: 100%;
    }
  }
}
</style>
